02 / 02

What are class components?

  1. 1

    A class component requires you to extend from React.Component and create a render function that returns a React element.

  2. 2

    Class components are based on ES6 classes and can have their own state and lifecycle methods.

Difficulty: 3/10
Topics: state, lifecycle, binding

Scenario Questions

0-2 years experience
  1. 1

    How would you turn a simple counter widget into a class component?

  2. 2

    What happens if you forget to bind an event handler in a class component?

  3. 3

    Where and how do you initialize state in a class component's constructor?

2-5 years experience
  1. 1

    We fetch data in componentDidMount, but the component leaks memory when unmounted. How would you fix it?

  2. 2

    Why does a class component re‑render when setState is called with the same value, and how can you avoid unnecessary renders?

  3. 3

    If a parent passes a new prop that doesn't affect rendering, what can you do to optimise the class component?

5-8 years experience
  1. 1

    Our dashboard has dozens of class components with complex lifecycle logic. How would you refactor them for better maintainability and testability?

  2. 2

    Discuss the trade‑offs between using shouldComponentUpdate and extending PureComponent in a large list rendering scenario.

  3. 3

    When doing server‑side rendering, what extra considerations do class components introduce compared to functional components with hooks?

8+ years experience
  1. 1

    Our codebase is 80% class components and we plan to migrate to hooks over the next few years. How would you design a migration strategy that minimizes risk and keeps teams productive?

  2. 2

    How would you create a shared base class for common behavior across many class components while avoiding tight coupling?

  3. 3

    What architectural implications arise when mixing class components and functional components in a large app, and how would you enforce consistency?

Follow-up Questions

  • Can you show a quick code snippet for that?
  • What would you change if you needed to add new props?
  • How does this affect testing the component?